<template>
    <div>
        <el-row>
  <el-col :span="8" style="padding-right:10px ;"><div class="grid-content bg-purple">
    <el-card class="box-card">
        <div class="user">
            <img src="../../1.jpg" class="image">
            <div class="userInfo">
                <p class="name">cloud</p>
                <p class="control">超级管理员</p>
            </div>
        </div>
        <hr>
        <div class="login-info">
          <p>上次登陆时间 : <span class="weak">2023-4-15</span></p>
            <p>上次登录地点:  <span class="weak">武汉</span></p>
        </div>
</el-card>
<el-card class="tab">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="品牌"
        width="80">
      </el-table-column>
      <el-table-column
        prop="todayBuy"
        label="今日购买"
        width="80">
      </el-table-column>
      <el-table-column
        prop="monthBuy"
        label="月购买">
      </el-table-column>
      <el-table-column
        prop="totalBuy"
        label="总量">
      </el-table-column>
    </el-table>
</el-card>
  </div></el-col>
  <el-col :span="16" style="padding-left: 10px;">
  <div class="num">
    <el-card v-for="item in countData" :key="item.name" :body-style="{display : 'flex',padding:0}" >
      <i class="icon" :class="`el-icon-${item.icon}`"  :style="{background:item.color ,padding:0}"></i>
      <div class="detail"> 
        <p class="detail1">{{ item.value }}</p>
        <p class="detail2">{{ item.name }}</p>
       </div>
    </el-card>
  </div>
  <div class="grid-content bg-purple-light">
  </div>
  <el-card style="height: 280px;" class="hi">
    <div ref="echarts1" style="width: 100%; height: 280px;">

    </div>
  </el-card>
  <div class="graph">
    <el-card style="height: 260px;">
    <div ref="echarts2" style=" height: 260px;"></div>
  </el-card>
    <el-card style="height: 260px;">
      <div ref="echarts3" style="height: 240px;"></div>
    </el-card>
  </div>
</el-col>
 
</el-row>
    </div>
</template>
<style lang="less" scoped>
.image{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 40px;
}
.user{
    display:flex;
   align-items: center;
   margin-bottom: 20px;
}
.name{
    font-size: 32px;
    margin-bottom: 10px;
    
}
.control{
    color: rgb(130, 134, 134);

}
.weak{
    margin-left: 60px;
}
.tab{
    margin-top: 20px;
}
.icon{
  height: 80px;
  width: 80px;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  color: #ffffff;

} 
.detail{
  display:flex;
flex-direction: column;
justify-content: center;
  margin-left: 10px;
  align-items: center;
}
.detail1{
  font-size: 30px;
}
.detail2{
  font-size: 14px;
  color: rgb(154, 154, 148);
  text-align: center;
}
.num{
  display:flex;
  flex-wrap: wrap;
  .el-card{
    height: 80px;
    width: 32%;
    margin-bottom:10px ;
    justify-content: space-between;
  }
 /*  height: 80px; */
}
.graph{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card{
    width: 48%;
  }
}
</style>

  <script>
  import { getData } from '../api'
 import * as echarts from 'echarts'
    export default {
      data() {
        return {
          tableData: [
          ],
          countData:[
            {
              name:"今日支付订单",
              value:1234,
              icon:"success",
              color:"#2ec7c9"
            },
            
             {
              name:"今日收藏订单",
              value:210,
              icon:"star-on",
              color:"#ffb980"
            },
             {
              name:"今日未支付订单",
              value:1234,
              icon:"s-goods",
              color:"#5ab1ef"
            },
             {
              name:"本月支付订单",
              value:1234,
              icon:"success",
              color:"#2ec7c9"
            },
             {
              name:"本月收藏订单",
              value:210,
              icon:"star-on",
              color:"#ffb980"
            },
             {
              name:"本月未支付订单",
              value:1234,
              icon:"s-goods",
              color:"#5ab1ef"
            },
          ]
        }
      },mounted() {
  getData().then(({ data }) => {
    const { tableData, orderData,userData,videoData } = data.data
    this.tableData = tableData

    // 初始化图表
    const chartDom = this.$refs.echarts1
    if (!chartDom) return 
    if (!orderData || !orderData.data || !orderData.date) {
      console.error('orderData数据格式错误')
      return
    }

    const echarts1 = echarts.init(chartDom)
    
    // 提取品牌名（苹果、vivo等，从data数组的第一个对象中获取）
    const brandNames = Object.keys(orderData.data[0] || {})
    
    // 图表配置
    const option = {
      tooltip: { trigger: 'axis' },
      legend: { data: brandNames }, // 图例：品牌名
      xAxis: { 
        type: 'category', 
        data: orderData.date // x轴：日期（20191001等）
      },
      yAxis: { type: 'value' },
      series: brandNames.map(brand => ({
        name: brand,
        type: 'line',
        // 每天的该品牌数据（遍历7天数据，提取当前品牌的值）
        data: orderData.data.map(day => day[brand])
      }))
    }

    echarts1.setOption(option)
    //柱状图
   const echarts2 = echarts.init (this.$refs.echarts2)
   const echarts2Option = {
    legend: {
      textStyle: {
        color:"#333",
      },
    },
    grid: {
      left:"20%"
    },
    tooltip:{
      trigger:"axis",
    },
    xAxis: {
      type:"category",
      data:userData.map(item => item.data),
      axisLine:{
        lineStyle: {
          color:"#17b3a3",
        },
      },
      axisLabel:{
        interval: 0,
        color:"#333",
      },
    },
    yAxis:[
      {type:"value",
        axisLine:{
          lineStyle:{
            color:"#17b3a3",
          },
        },
      },
    ],
    color:["#2ec7c9","#b6a2de"],
    series:[
      {
        name:'新增用户',
        data:userData.map(item => item.new),
        type:'bar'
      },
      {
        data:userData.map(item => item.active),
        name:'活跃用户',
        type:'bar'
      }
    ],
   }
   echarts2.setOption(echarts2Option)
   //饼状图
   const echarts3 = echarts.init (this.$refs.echarts3)
   const echarts3OPtion = {
    tooltip:{
      trigger:"item",
    },
    color:[
      "#0f78f4",
      "#dd536b",
      "#9462e5",
      "#a6a6a6",
      "#e1bb22",
      "#39c362",
      "#3ed1cf"
    ],
    series:[
      {
        data: videoData,
        type:'pie'
      }
    ],
   }
   echarts3.setOption(echarts3OPtion)
    // 自适应窗口
    window.addEventListener('resize', () => echarts1.resize())
    this.$on('hook:beforeDestroy', () => {
      window.removeEventListener('resize', () => echarts1.resize())
    })
  }).catch(err => console.error('请求失败:', err))
}
      }
    
  </script>
